<template>
    <!-- {{ content_inA }} -->
    <!-- {{ pass }} -->
    <!-- {{ content }} -->
    <!--{{ this.pass_position }}-->
    <!-- {{ this.token }}  -->
    
    <p style="text-align: center;font-size: 1.5em;">
        <b>欢迎来到好未来学习机构</b>
        <br>
        <br>
        <br>
        {{ hello }}
    </p> 

    <div class="mainbody">
        <div class="info-box" v-if="this.pass_SelectedMenuItem ==='个人信息'">
            <img src="../assets/logo.ico" alt="Profile Picture" class="profile-picture">
            <div class="info-content">
                <h1>{{ this.user_info_result.username}}</h1>
                <p>年 龄 : {{ user_info_result.age}}</p>
                <p v-if="this.user_info_result.position==='boss'">职位：CEO</p>
                <p v-else-if="this.user_info_result.position==='teacher'">职位：老师</p>
                <p v-else-if="this.user_info_result.position==='it'">职位：代码工程师</p>
                <p v-else-if="this.user_info_result.position==='admin'">职位：高管</p>
                <p v-else-if="this.user_info_result.position==='finance'">职位：财政管理人员</p>
                <p>公司：好未来 只为做好教育</p>
                <p>联系方式  {{ user_info_result.email}}</p>
                <p>个人简介：热爱编程，对新技术充满好奇。</p>
            </div>
        </div>
        <div class="vocation-apply" v-else-if="this.pass_SelectedMenuItem ==='假条申请'">
            <div class="vocation-request-system" v-if="this.user_info_result.position==='boss'">
                老板你好，祝你生活愉快，你想休息就休息，不用请假
            </div>
            <div class="vocation-request-system" v-else>

                <h1>员工请假通道</h1>
                
                <form @submit.prevent="submitvocationRequest(vocation)">

                  <label for="startDate">开始日期:</label>
                  <input type="date" id="startDate" v-model="vocation.startDate" required>
                  <label for="endDate">结束日期:</label>
                  <input type="date" id="endDate" v-model="vocation.endDate" required>
            
                  <label for="reason">请假原因:</label>
                  <textarea id="reason" v-model="vocation.reason" required></textarea>
            
                  <button type="submit">提交请假申请</button>
                </form>
                <h1>请假记录</h1>

                <ul class="leave-list">
      <li v-for="(record, index) in leaveRecords" :key="index" class="leave-item">
        <p class="date-range">日期: {{ record.startDate }} - {{ record.endDate }}</p>
        <p class="reason">原因: {{ record.reason }}</p>
        <p class="status">状态: {{ record.status }}</p>
        <p class="reviewer">审核人: {{ record.permiter }}</p>
                  </li>
                </ul>
                
            </div>
        </div>
        <div class="vocation-management" v-else-if="this.pass_SelectedMenuItem ==='假条管理'">
            <div class="vocation-apply-info" v-if="this.user_info_result.position==='admin'||this.user_info_result.position==='boss'">
                <ul>
                    <li v-for="(record, index) in leaveRecords" :key="index">
                        <p>日期: {{ record.startDate }}--{{ record.endDate }}</p>
                        <p>原因: {{ record.reason }}</p>
                        <p>状态: {{ record.status }}</p>
                        <p>审核人：{{ record.permiter }}</p>
                        <!-- 审批按钮 -->
                        <!-- <button @click="adadad()">通过</button>
                        <button @click="adadad()">拒绝</button> -->
                        <button @click="permit_vocation_apply(record, '通过')">通过</button> 
                        <button @click="permit_vocation_apply(record, '拒绝')">拒绝</button>
                    </li>
                </ul>
                这里展示老板或者管理者可以看到的画面
            </div>
            <div class="vocation-apply-info" v-else>
                抱歉，你没有权限
            </div>
        </div>
    </div>
</template>
  
<script>
export default{
    data(){
        return{
            user_info_result:{
                username:"未加载",
                age: 18,
                email: "未加载",
                position:"未加载",
            },
            vocation:{

                startDate:'',
                endDate:'',
                reason:'',
                applyer:'',
                apply_time:'',
                status:'待审核',
                permiter:'Mr.hello',
            },
            leaveRecords:[],
            hello:'',
        } 
    },


    
    props:['pass_position','token','pass_SelectedMenuItem'],

    computed:{
        // contentA() {
        //     if (this.selectedMenuItem === '假条申请') {
        //         return '你好，要注意休息';
        //     } else {
        //         return this.generateResultAContent();
        //     }
        // },
        

    },
    methods:{
        sayHello() {
            switch (this.pass_position) {
                case 'boss':
                    return '老板你好';
                case 'teacher':
                    return '老师你好';
                case 'it':
                    return 'Coder你好';
                default:
                    return '欢迎';
            }
        },
        find_user_info()
        {
            //从localstorage里面查找token，如果找到了，那么就返回信息并且的展示账号的基本信息
            for (let i = 0; i < localStorage.length; i++) {
                const key = localStorage.key(i);
                if (key && key.startsWith('user')) 
                {
                    const user = JSON.parse(localStorage.getItem(key));
                    if(this.token===user.token)
                    {
                        this.user_info_result.username=user.username;
                        this.user_info_result.email=user.email;
                        // console.log(user);
                        // console.log(this.user_info_result.username);
                        // console.log(this.user_info_result.email);
                    }
                }
            }
        },
        submitvocationRequest(vp_message){
            const vocation_permit_key = 'vp' + Date.now();
            vp_message.apply_time=Date.now();
            vp_message.applyer=this.user_info_result.username;
            if(this.user_info_result.position==='boss')
            {
                vp_message.status='已通过';
            }
            localStorage.setItem(vocation_permit_key, JSON.stringify(vp_message));
            console.log(vp_message);
            this.initvocationrecords();
        },
        initvocationrecords(){
            this.leaveRecords = [];
            for (let i = 0; i < localStorage.length; i++) 
            {
                const key = localStorage.key(i);
                if (key && key.startsWith('vp')) 
                {
                    const record = JSON.parse(localStorage.getItem(key));
                    if (record.applyer === this.user_info_result.username) {
                        //在records里面新增一条记录record
                        this.leaveRecords.push(record);
                    }
                }
            }
        },
        permit_vocation_apply(record,status)
        {
            for (let i = 0; i < localStorage.length; i++) 
            {
                const key = localStorage.key(i);
                if (key && key.startsWith('vp')) 
                {
                    const recordtemp = JSON.parse(localStorage.getItem(key));
                    if (recordtemp.apply_time === record.apply_time) {
                        // console.log('hello')
                        localStorage.removeItem('key' + recordtemp.apply_time);
                        record.status=status;
                        localStorage.setItem('vp'+record.apply_time, JSON.stringify(record));
                    }
                }
            }
        },
        // adadad()
        // {
        //     console.log(1);
        // }


    },
    created()
    {
        this.find_user_info();
        this.user_info_result.position=this.pass_position
        this.hello=this.sayHello();
        this.initvocationrecords();
    }
}


</script>

<style scoped>
.leave-list {
  list-style: none; /* 移除列表样式 */
  padding: 0; /* 移除内边距 */
}

.leave-item {
  border: 1px solid #ccc; /* 添加边框 */
  padding: 10px; /* 增加内边距 */
  margin-bottom: 10px; /* 底部间距 */
}

.date-range {
  font-weight: bold; /* 加粗日期文本 */
  margin-bottom: 5px; /* 底部间距 */
}

.reason {
  margin-bottom: 5px; /* 底部间距 */
}

.status {
  color: #007bff; /* 状态文本颜色 */
  margin-bottom: 5px; /* 底部间距 */
}

.reviewer {
  font-style: italic; /* 审核人文本斜体 */
  color: #666; /* 审核人文本颜色 */
}
input[type="text"],
input[type="date"],
textarea {
  border: 1px solid #ccc;
  font-size: 16px;
  padding: 8px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
}
.mainbody {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 800px;
}

.info-box {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 300px;
    text-align: center;
}

.profile-picture {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 20px;
}

.info-content h1 {
    margin: 0;
    color: #333;
    font-size: 24px;
}

.info-content p {
    color: #666;
    font-size: 16px;
    margin: 10px 0;
}
  </style>